웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
웹접근성을 위해 사용하는 코딩기술 중 하나가 바로 table에서 scope 속성을 이용하는 방법입니다. scope 속성은 테이블의 th 또는 td 등의 해당 셀에게 사용하며 컬럼(column)인지 행(row)인지의 여부를 알려주는 역활을 합니다.
그리하여 작성된 코드가 시각 장애인용 리더기를 통해 읽어지는 경우 해당하는 속성값에 따라 어떤 순서로 읽을지 결정하게 됩니다. 그럼 아래 예제를 참고하세요!
@ table_scope.html
위 코드의 출력 결과는 아래와 같습니다.
그리하여 작성된 코드가 시각 장애인용 리더기를 통해 읽어지는 경우 해당하는 속성값에 따라 어떤 순서로 읽을지 결정하게 됩니다. 그럼 아래 예제를 참고하세요!
# scope 속성 예제코드 보기
아래는 scope 속성을 사용한 예제소스입니다.@ table_scope.html
<table border="1">
<thead>
<tr>
<th scope="col">번호</th>
<th scope="col">이름</th>
<th scope="col">나이</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>Will</td>
<td>19</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Jason</td>
<td>28</td>
</tr>
<tr>
<td scope="row">3</td>
<td>William</td>
<td>36</td>
</tr>
</tbody>
</table>
<thead>
<tr>
<th scope="col">번호</th>
<th scope="col">이름</th>
<th scope="col">나이</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>Will</td>
<td>19</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Jason</td>
<td>28</td>
</tr>
<tr>
<td scope="row">3</td>
<td>William</td>
<td>36</td>
</tr>
</tbody>
</table>
위 코드의 출력 결과는 아래와 같습니다.
| 번호 | 이름 | 나이 |
|---|---|---|
| 1 | Will | 19 |
| 2 | Jason | 28 |
| 3 | William | 36 |
! 참고사항
HTML5에서는 td태그에서 scope 속성이 표준이 아니라는 점 참고로 알아두시기 바랍니다.아래의 글도 찾고 계시지 않나요?
